<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { self_pickup_point_listAPI } from "@/api/data/self_pickup_point.js";
import {
  self_pickup_quotation_delAPI,
  costCalculateAPI,
} from "@/api/quotation/self_pickup_quotation.js";

import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  endTime: "",
  startTime: "",
  name: "",
  destinationId: "",
  cargoTypeId: "",
  timeEfficiencyId: "",
  shopId: "",
};

export default {
  name: "extra-long-fee",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
      warehouse: (state) => state.custom_dict.warehouse,
      category: (state) => state.custom_dict.category,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },

  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/base/quotationManagement/selfPickupQuotation/list",
        method: "get",
        montage: true,
      },
      set_addRequest: {
        url: "/base/quotationManagement/save",
        method: "post",
        montage: false,
      },
      selectionArr: [], // 多选框内容
      selfPickupPointList: [], //自提点
      measurementVisible: false,
      measurement_msg: "",
    };
  },
  mounted() {
    self_pickup_point_listAPI()
      .then((res) => {
        this.rebase.find((el) => el.label === "自提点").options = res.rows;
        tableBase[1].operate.options = res.rows;
        this.selfPickupPointList = res.rows;
      })
      .catch((err) => {});
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    async del(id) {
      console.log("确定要删除吗？");
      await this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await self_pickup_quotation_delAPI(id);
      this.$refs.table.getListData();
      this.$message.success("删除成功");
    },
    // 导出
    async downLoad() {
      if (this.selectionArr.length > 0) {
        const ids = this.selectionArr.map((v) => v.id);
        this.download(
          "/base/quotationManagement/selfPickupQuotation/export",
          {
            ids,
          },
          `自提报价维护_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    measurement() {
      console.log(this.propsSearchForm);
      if (!this.propsSearchForm.feeType)
        return this.$message.error("请先选择费用类型");
      if (!this.propsSearchForm.calculateWeight)
        return this.$message.error("请先输入测算重量");
      costCalculateAPI(this.propsSearchForm)
        .then((res) => {
          this.measurement_msg = res.data
            .map((v) => ` 测算结果:${v.freight}`)
            .join("\n");
          this.$nextTick(() => {
            this.measurementVisible = true;
          });
        })
        .catch(() => {
          this.measurement_msg = "未查询到符合条件的报价";
          this.$nextTick(() => {
            this.measurementVisible = true;
          });
        });
    },
  },
};
</script>

<template>
  <div>
    <el-dialog title="测算结果" :visible.sync="measurementVisible" width="30%">
      <span>{{ measurement_msg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="measurementVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="mb-3">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
        @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
              <el-button type="primary" @click="measurement">测算</el-button>
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <div>
      <dmb-table
        ref="table"
        :prop-list="tableBase()"
        :operateWether="true"
        :is-operate="true"
        :show-index-column="true"
        select-column-type="CHECKBOX"
        :props-search-form="propsSearchForm"
        :req-request="requestConfig"
        :set-request="set_addRequest"
        :add-request="set_addRequest"
        select-key="id"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="
          (row) => {
            selectionArr = row;
          }
        "
      >
        <template v-slot:operate="{ row }">
          <el-button type="danger" v-if="row.id" @click="del(row.id)"
            >删除</el-button
          >
        </template>
        <template v-slot:feeType="{ row }">
          <span v-if="row.feeType === 5">自提价格</span>
          <el-select v-else v-model="row.feeType" placeholder="请选择消费类型">
            <el-option label="自提价格" :value="5"> </el-option>
          </el-select>
        </template>
      </dmb-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
